<script setup>
import {computed, reactive, ref} from "vue";
import SelectFolder from "@/components/SelectFolder.vue";
import ProjectForm from "@/components/ProjectForm.vue";

const activeList = [
  {
    name: '选择项目目录',
  },
  {
    name: '更改若依项目配置',
  },
]

const activeIndex = ref(0)

const projectInfo = reactive({
  path: 'C:/Users/40767/Desktop/work/private/若依框架修改器/RuoYi-Vue',
  fileList: [],
  java: {
    groupId: '',
    artifactId: '',
  },
})

const buttonShowList = computed(() => {
  const list = []
  if (activeIndex.value > 0 && activeIndex.value < activeList.length) {
    list.push({name: '上一步'})
  }
  if (activeIndex.value < activeList.length - 1) {
    list.push({name: '下一步'})
  }
  if (activeIndex.value === activeList.length - 1) {
    list.push({name: '完成'})
  }
  return list
})

function handleButton(name) {
  if (name === '下一步') {
    activeIndex.value++
  } else if (name === '完成') {
    activeIndex.value++
  } else {
    activeIndex.value--
  }
}
</script>

<template>
  <el-container>
    <el-header>
      <h1>若依框架修改器</h1>
    </el-header>
    <el-main>

      <el-steps style="max-width: 600px" :active="activeIndex" finish-status="success">
        <el-step v-for="active in activeList" :key="active.name" :title="active.name"/>
      </el-steps>

      <SelectFolder v-if="activeIndex===0" class="box" v-model="projectInfo.path">
      </SelectFolder>

      <ProjectForm v-else-if="activeIndex===1" class="box" v-model="projectInfo">
      </ProjectForm>

    </el-main>
    <el-footer>
      <div class="button-group">
        <el-button v-for="button in buttonShowList" :key="button.name" @click="handleButton(button.name)">
          {{ button.name }}
        </el-button>
      </div>
    </el-footer>
  </el-container>
</template>

<style lang="scss" scoped>
.el-container {
  height: 100vh;
}

.box {
  margin-top: 10px;
}

.button-group {
  margin-top: 10px;
  text-align: right;

  .el-button {
    width: 100px;
  }
}
</style>